<template>
    <div class="contain">
        <div class="mui-card card1" v-for="(item,index) in shoppingCartList" :key="item.id">
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <div class="mui-switch mui-switch-mini mui-active" v-switch>
                        <div class="mui-switch-handle"></div>
                    </div>
                    <img :src="item.thumb_path" alt="">
                    <div class="goodInfo">
                        <p class="title">{{item.title}}</p>
                        <div class="bottom">
                            <span class="price">{{item.sell_price}}</span>
                            <div class="mui-numbox" data-numbox-min='0' v-numbox>
                                <button class="mui-btn mui-btn-numbox-minus" type="button" @click="changeNum(item.id)">
                                    -
                                </button>
                                <input class="mui-input-numbox" type="number"
                                       :value="$store.getters.getGoodsCount[item.id]" disabled
                                       :ref='"goodNum"+item.id' :goodId="item.id"/>
                                <button class="mui-btn mui-btn-numbox-plus" type="button" @click="changeNum(item.id)">
                                    +
                                </button>
                            </div>
                            <a href="#" @click.prevent="delGoods(item.id,index)">删除</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="mui-card card2">
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <div class="left">
                        <p>总计(不含运费)</p>
                        <p>已勾选 <span class="red">0</span>件，总价<span class="red">￥150</span></p>
                    </div>
                    <div class="right">
                        <button type="button" class="mui-btn mui-btn-danger">去结算</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import mui from '../../lib/mui/dist/js/mui.min.js';

    export default {
        data: function () {
            return {
                shoppingCartList: []
            }
        },
        methods: {
            getShoppingCartList() {
                var idArr = [];
                this.$store.state.shoppingCarts.forEach(item => {
                    idArr.push(item.id)
                });
                if (idArr.length < 1) {
                    return;
                }
                var idStr = idArr.join(',');
                this.$http.get('http://www.liulongbin.top:3005/api/goods/getshopcarlist/' + idStr).then(item => {
                    this.shoppingCartList = item.body.message;
                });
            },
            changeNum(id) {
                var obj = {
                    id: id,
                    count: this.$refs['goodNum' + id][0].value
                };
                this.$store.commit('updateGoods', obj)
            },
            delGoods(id, index) {
                this.$store.commit('delGoods', id);
                this.shoppingCartList.splice(index, 1);
            }
        },
        created() {
            this.getShoppingCartList();
        },
        mounted() {
            mui('.mui-switch')['switch']();
            mui('.mui-numbox').numbox();
        },
        directives: {
            numbox: {
                bind: function (el) {
                    mui('.mui-numbox').numbox();
                }
            },
            switch: {
                bind: function (el) {
                    mui('.mui-switch')['switch']();
                }
            }
        }
    }

</script>

<style scoped lang="less">
    .contain {
        img {
            width: 50px;
            height: 50px;
        }

        .card1 {
            .mui-card-content-inner {
                display: flex;
                justify-content: space-around;
                align-items: center;

                .goodInfo {
                    .title {
                        font-size: 13px;
                        color: #333;
                        max-width: 200px;
                    }

                    .bottom {
                        .price {
                            color: #cf2d28;
                        }

                        .mui-numbox {
                            height: 30px;
                            width: 120px;
                            margin: 0 5px;
                        }
                    }
                }
            }
        }

        .card2 {
            .mui-card-content-inner {
                display: flex;
                justify-content: space-between;
                align-items: center;
            }

            .left {
                .red {
                    color: #cf2d28;
                }
            }
        }
    }
</style>
